<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>amCharts Responsive Example</title>
        <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
        <script src="http://www.amcharts.com/lib/3/serial.js"></script>
        <script src="http://www.amcharts.com/lib/3/amstock.js"></script>
        <script src="../responsive.min.js"></script>
        <style>
            body,
            html {
                height: 100%;
                padding: 0;
                margin: 0;
                font-family: Verdana;
                font-size: 12px;
            }
        </style>
        <script>
            var chartData1 = [];
            var chartData2 = [];
            var chartData3 = [];
            var chartData4 = [];
            generateChartData();

            function generateChartData()
            {
                var firstDate = new Date();
                firstDate.setDate(firstDate.getDate() - 500);
                firstDate.setHours(0, 0, 0, 0);
                for (var i = 0; i < 500; i++)
                {
                    var newDate = new Date(firstDate);
                    newDate.setDate(newDate.getDate() + i);
                    var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
                    var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
                    var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
                    var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
                    var a3 = Math.round(Math.random() * (100 + i)) + 200;
                    var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
                    var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
                    var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;
                    chartData1.push(
                    {
                        "date": newDate,
                        "value": a1,
                        "volume": b1
                    });
                    chartData2.push(
                    {
                        "date": newDate,
                        "value": a2,
                        "volume": b2
                    });
                    chartData3.push(
                    {
                        "date": newDate,
                        "value": a3,
                        "volume": b3
                    });
                    chartData4.push(
                    {
                        "date": newDate,
                        "value": a4,
                        "volume": b4
                    });
                }
            }
            var chart = AmCharts.makeChart("chartdiv",
            {
                "type": "stock",
                "theme": "none",
                "dataSets": [
                {
                    "title": "first data set",
                    "fieldMappings": [
                    {
                        "fromField": "value",
                        "toField": "value"
                    },
                    {
                        "fromField": "volume",
                        "toField": "volume"
                    }],
                    "dataProvider": chartData1,
                    "categoryField": "date"
                },
                {
                    "title": "second data set",
                    "fieldMappings": [
                    {
                        "fromField": "value",
                        "toField": "value"
                    },
                    {
                        "fromField": "volume",
                        "toField": "volume"
                    }],
                    "dataProvider": chartData2,
                    "categoryField": "date"
                },
                {
                    "title": "third data set",
                    "fieldMappings": [
                    {
                        "fromField": "value",
                        "toField": "value"
                    },
                    {
                        "fromField": "volume",
                        "toField": "volume"
                    }],
                    "dataProvider": chartData3,
                    "categoryField": "date"
                },
                {
                    "title": "fourth data set",
                    "fieldMappings": [
                    {
                        "fromField": "value",
                        "toField": "value"
                    },
                    {
                        "fromField": "volume",
                        "toField": "volume"
                    }],
                    "dataProvider": chartData4,
                    "categoryField": "date"
                }],
                "panels": [
                {
                    "showCategoryAxis": false,
                    "title": "Value",
                    "percentHeight": 70,
                    "stockGraphs": [
                    {
                        "id": "g1",
                        "valueField": "value",
                        "comparable": true,
                        "compareField": "value",
                        "balloonText": "[[title]]:<b>[[value]]</b>",
                        "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
                    }],
                    "stockLegend":
                    {
                        "periodValueTextComparing": "[[percents.value.close]]%",
                        "periodValueTextRegular": "[[value.close]]"
                    }
                },
                {
                    "title": "Volume",
                    "percentHeight": 30,
                    "stockGraphs": [
                    {
                        "valueField": "volume",
                        "type": "column",
                        "showBalloon": false,
                        "fillAlphas": 1
                    }],
                    "stockLegend":
                    {
                        "periodValueTextRegular": "[[value.close]]"
                    }
                }],
                "chartScrollbarSettings":
                {
                    "graph": "g1"
                },
                "chartCursorSettings":
                {
                    "valueBalloonsEnabled": true,
                    "fullWidth": true,
                    "cursorAlpha": 0.1,
                    "valueLineBalloonEnabled": true,
                    "valueLineEnabled": true,
                    "valueLineAlpha": 0.5
                },
                "periodSelector":
                {
                    "position": "left",
                    "periods": [
                    {
                        "period": "MM",
                        "selected": true,
                        "count": 1,
                        "label": "1 month"
                    },
                    {
                        "period": "YYYY",
                        "count": 1,
                        "label": "1 year"
                    },
                    {
                        "period": "YTD",
                        "label": "YTD"
                    },
                    {
                        "period": "MAX",
                        "label": "MAX"
                    }]
                },
                "dataSetSelector":
                {
                    "position": "left"
                },
                "responsive":
                {
                    "enabled": true
                }
            });
        </script>
    </head>

    <body>
        <div id="chartdiv" style="width: 100%; height: 100%;"></div>
    </body>

</html>